<template>
  <div class="addPower">
    <el-button class="addPowerBtn" type="primary" size="small" @click="dialogFormVisible = true">新建权限</el-button>
    <el-dialog title="新建权限" :visible.sync="dialogFormVisible" :before-close="close">
      <el-form :model="form">
        <el-row>
          <el-col :span="12">
            <el-form-item label="权限名称：" :label-width="formLabelWidth">
              <el-input v-model="form.powerName" auto-complete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="权限菜单：" :label-width="formLabelWidth">
            <el-checkbox-group v-model="form.type">
              <el-checkbox label="账号管理" name="type" />
              <el-checkbox label="商品管理" name="type" />
              <el-checkbox label="订单管理" name="type" />
              <el-checkbox label="权限管理" name="type" />
            </el-checkbox-group>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" size="small" @click="addPower">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { addPower } from '@/api/power'
import { allChinese } from '@/utils/validate.js'
export default {
  name: 'AddPower',
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: '90px',
      form: {
        powerName: '',
        type: []
      }
    }
  },
  methods: {
    // 确认提交权限信息
    addPower() {
      const data = {
        powerName: this.form.powerName,
        powerArr: this.form.type,
        menuName: ''
      }
      if (!allChinese(data.powerName)) {
        this.$message.error('权限名应为中文或字母组合')
      } else if (data.powerArr.length === 0) {
        this.$message.error('请选择权限菜单')
      } else {
        addPower(data).then(res => {
          if (res.resultCode === '0000') {
            console.log(res.data)
          }
        })
      }
      // this.close()
    },
    // 关闭刷新列表
    close() {
      this.dialogFormVisible = false
    }
  }
}
</script>

<style lang="stylus" scoped>
  .addPowerBtn
    margin-left 20px
    margin-top 20px
</style>
